<template>
  <div class="app">
    <myNavbar title="收款方式" backTyep="1"></myNavbar>
    <div class="up">
<!--      <div class="up-trade" >-->
<!--        <text class="up-trade-text">{{"账号名"}}</text>-->
<!--        <text class="up-trade-txt">{{userInfo.nickname}}</text>-->
<!--        &lt;!&ndash;        <image class="up-location-img" src="https://rzico.oss-cn-shenzhen.aliyuncs.com/dinner/wode/wode-gengduo.png"></image>&ndash;&gt;-->
<!--      </div>-->
<!--      <div class="up-site" v-if="userInfo.mobile == null"  @click="toBindingMobile()">-->
<!--        <text class="up-site-text">{{"微信"}}</text>-->
<!--        <div class="up-location">-->
<!--          <text class="up-location-txt">{{"请绑定手机号码"}}</text>-->
<!--          <image class="up-location-img" src="https://rzico.oss-cn-shenzhen.aliyuncs.com/dinner/wode/wode-gengduo.png"></image>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="up-site" v-if="userInfo.mobile">-->
<!--        <text class="up-site-text">{{"银行卡"}}</text>-->
<!--        <div class="up-location">-->
<!--          &lt;!&ndash;          <text class="up-location-txt">{{userInfo.mobile}}</text>&ndash;&gt;-->
<!--          <text class="up-trade-txt">{{userInfo.mobile}}</text>-->

<!--          &lt;!&ndash;          <image style="width: 13px;height: 23px;margin: 41px 41px 43px 24px;" ></image>&ndash;&gt;-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="up-site" @click="toImmersionPage('changePassword')">-->
<!--        <text class="up-site-text">{{"登录密码"}}</text>-->
<!--        <div class="up-location">-->
<!--          <text class="up-location-txt">{{"重置登录密码"}}</text>-->
<!--          <image class="up-location-img" src="https://rzico.oss-cn-shenzhen.aliyuncs.com/dinner/wode/wode-gengduo.png"></image>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="up-site" @click="toChangePayment()">-->
<!--        <text class="up-site-text">{{"银行卡"}}</text>-->
<!--        <div class="up-location">-->
<!--          <text class="up-location-txt">{{"重置支付密码"}}</text>-->
<!--          <image class="up-location-img" src="https://rzico.oss-cn-shenzhen.aliyuncs.com/dinner/wode/wode-gengduo.png"></image>-->
<!--        </div>-->
<!--      </div>-->


      <div class="up-site" @click="toAlipay()">
        <div class="up-site-left">
          <text class="mine-order-icon" style="font-weight: bold">&#xe675;</text>
          <text class="up-site-text">{{"支付宝"}}</text>
        </div>
        <div class="up-location">
          <image class="up-location-img" src="https://rzico.oss-cn-shenzhen.aliyuncs.com/dinner/wode/wode-gengduo.png"></image>
        </div>
      </div>
      <div class="up-site" @click="toWeChat()">
        <div class="up-site-left">
          <text class="mine-order-icon" style="font-weight: bold">&#xe677;</text>
          <text class="up-site-text">{{"微信"}}</text>
        </div>
        <div class="up-location">
          <image class="up-location-img" src="https://rzico.oss-cn-shenzhen.aliyuncs.com/dinner/wode/wode-gengduo.png"></image>
        </div>
      </div>
      <div class="up-site" @click="toBankCard()">
        <div class="up-site-left">
          <text class="mine-order-icon" style="font-weight: bold">&#xe679;</text>
          <text class="up-site-text">{{"银行卡"}}</text>
        </div>
        <div class="up-location">
          <image class="up-location-img" src="https://rzico.oss-cn-shenzhen.aliyuncs.com/dinner/wode/wode-gengduo.png"></image>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import myNavbar from "../../../components/myNavbar/myNavbar";
  import {getInfo} from '../../../api/user'
  export default {
    name: "paymentMethod.vue",
    components: {
      myNavbar,
    },
    data() {
      return {
        text: '开启验证后，每当有用户在新设备上登录您的账户，系统将对其身份认证',
        verify: true,
        userInfo:{}
      }
    },
    pageResume: function (data) {
      var _this = this;
      if (_this.getGlobalData().token != null) {
        this.getGetInfo()
      }
    },
    methods: {
      toBankCard(){
          eeui.openPage({
            url: `root://pages/member/paymentMethod/accountSecurity/bankCard`,
            params: {username: this.userInfo.username,mobile: this.userInfo.mobile},
            statusBarType: 'immersion',
            statusBarStyle: false
          });
      },
      toAlipay(){
        if(this.userInfo.mobile){
          eeui.openPage({
            url: `root://pages/member/paymentMethod/accountSecurity/alipay`,
            params: {username: this.userInfo.username,mobile: this.userInfo.mobile},
            statusBarType: 'immersion',
            statusBarStyle: false
          });
        }else {
          eeui.confirm({
            title: "温馨提示",
            message: "请先绑定手机号码！",
            buttons: [{
              title: "确定",
              type: "positive"
            }]
          }, function (result) {});
          return;
        }

      },
      toWeChat(){
        if(this.userInfo.mobile){
          eeui.openPage({
            url: `root://pages/member/paymentMethod/accountSecurity/weChat`,
            params: {username: this.userInfo.username,mobile: this.userInfo.mobile},
            statusBarType: 'immersion',
            statusBarStyle: false
          });
        }else {
          eeui.confirm({
            title: "温馨提示",
            message: "请先绑定手机号码！",
            buttons: [{
              title: "确定",
              type: "positive"
            }]
          }, function (result) {});
          return;
        }

      },
      toBindingMobile() {
        eeui.openPage({
          url: `root://pages/member/accountSecurity/bindingMobile`,
          params: {username: this.userInfo.username,mobile: this.userInfo.mobile},
          statusBarType: 'immersion',
          statusBarStyle: false
        });
      },
      toChangePayment(e) {
        if(this.userInfo.mobile){
          eeui.openPage({
            url: `root://pages/member/paymentMethod/accountSecurity/ChangePayment`,
            params: {username: this.userInfo.username,mobile: this.userInfo.mobile},
            statusBarType: 'immersion',
            statusBarStyle: false
          });
        }else {
          eeui.confirm({
            title: "温馨提示",
            message: "请先绑定手机号码！",
            buttons: [{
              title: "确定",
              type: "positive"
            }]
          }, function (result) {});
          return;
        }
      },
      toImmersionPage(e) {
        if(this.userInfo.mobile){
          eeui.openPage({
            url: `root://pages/member/accountSecurity/${e}`,
            params: {username: this.userInfo.username,mobile: this.userInfo.mobile},
            statusBarType: 'immersion',
            statusBarStyle: false
          });
        }else {
          eeui.confirm({
            title: "温馨提示",
            message: "请先绑定手机号码！",
            buttons: [{
              title: "确定",
              type: "positive"
            }]
          }, function (result) {});
          return;
        }
      },
      newDeviceVerify(e) {
        console.info(e)
        this.verify = e.isActive
      },
      getGetInfo() {
        getInfo().then(res => {
          // name
          let _userInfo = res.data.userInfo
          //   _userInfo.rmobile = _userInfo.mobile
          // _userInfo.mobile = _userInfo.mobile.replace(/^(\d{3}).*?(\d{4}$)/, "$1****$2")
          this.userInfo = _userInfo
          console.log("11111111111111111111")
          console.log(this.userInfo)
        })
      }
    },
    created:function() {
      this.getGetInfo()
    },
  }
</script>

<style scoped>
.app {
  flex: 1;
  background-color: #f9f9f9;
}

.up {
  /*margin-left: 20px;*/
  /*width: 710px;*/
  background-color: #FFFFFF;
  margin-top: 20px;
}

.up-trade {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom-style: solid;
  border-bottom-color: #E8E8E8;
  border-bottom-width: 2px;
}

.up-trade-text {
  padding: 35px 0 35px 39px;
  font-size: 33px;
  font-weight: 400;
  color: #333333;
}

.up-trade-txt {
  font-size: 29px;
  font-weight: 500;
  color: #999999;
  padding: 35px 43px 35px 38px;
}

.up-frame {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom-style: solid;
  border-bottom-color: #E8E8E8;
  border-bottom-width: 2px;
}

.up-frame-txt {
  font-size: 33px;
  font-family: SourceHanSansCN;
  font-weight: 400;
  color: #333333;
  padding: 35px 0 35px 39px;
}
.up-encase {
  /*display: flex;*/
  /*flex-direction: row;*/
  /*justify-content: end;*/

}
.up-encase-txt {
  font-size: 29px;
  font-family: SourceHanSansCN;
  font-weight: 500;
  color: #999999;
  padding: 35px 0px 35px 0;
}

.up-encase-img {
  width: 13px;
  height: 23px;
  margin: 41px 41px 43px 24px;
}

.up-site {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom-style: solid;
  border-bottom-color: #E8E8E8;
  border-bottom-width: 2px;
}

.up-site-left{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.up-site-text {
  font-size: 32px;
  font-family: SourceHanSansCN;
  font-weight: 400;
  color: #333333;
  /*padding: 35px 0 35px 39px;*/
}

.up-location {
  display: flex;
  flex-direction: row;
  justify-content: end;
}

.up-location-txt {
  font-size: 29px;
  font-family: SourceHanSansCN;
  font-weight: 500;
  color: #999999;
  padding: 35px 0px 35px 0;
}

.up-location-img {
  width: 13px;
  height: 23px;
  margin: 41px 41px 43px 24px;
}

.text {
  padding-top: 50px;
  padding-left: 40px;
  font-size: 29px;
  font-weight: 400;
  color: #666666;
}

.below {
  margin-top: 50px;
  height: 109px;
  background-color: #FFFFFF;
}

.below-txt {
  padding-left: 37px;
  padding-top: 8px;
  font-size: 33px;
  line-height: 33px;
  font-weight: 400;
  color: #333333;
}
.mine-order-icon {
  font-family: iconfont2;
  font-size: 50px;
  margin:0px 10px 0px 20px;
}
</style>

